<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap {
            margin: 20px auto;
            text-align: center;
        }

        #wrap br {
            display: none;
        }

        .btn-slide, .btn-slide2 {
            position: relative;
            display: inline-block;
            height: 50px;
            width: 200px;
            line-height: 50px;
            padding: 0;
            border-radius: 50px;
            background: #fdfdfd;
            border: 2px solid #0099cc;
            margin: 10px;
            transition: .5s;
        }

        .btn-slide2 {
            border: 2px solid #efa666;
        }

        .btn-slide:hover {
            background-color: #0099cc;
        }

        .btn-slide2:hover {
            background-color: #efa666;
        }

        .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
            right: 100%;
            margin-right: -45px;
            background-color: #fdfdfd;
            color: #0099cc;
        }

        .btn-slide2:hover span.circle2 {
            color: #efa666;
        }

        .btn-slide:hover span.title, .btn-slide2:hover span.title2 {
            right: 40px;
            opacity: 0;
        }

        .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
            opacity: 1;
            right: 40px;
        }

        .btn-slide span.circle, .btn-slide2 span.circle2 {
            display: block;
            background-color: #0099cc;
            color: #fff;
            position: absolute;
            float: right;
            margin: 5px;
            line-height: 42px;
            height: 40px;
            width: 40px;
            top: 0;
            right: 0;
            transition: .5s;
            border-radius: 50%;
        }

        .btn-slide2 span.circle2 {
            background-color: #efa666;
        }

        .btn-slide span.title,
        .btn-slide span.title-hover, .btn-slide2 span.title2,
        .btn-slide2 span.title-hover2 {
            position: absolute;
            right: 90px;
            text-align: center;
            margin: 0 auto;
            font-size: 16px;
            font-weight: bold;
            color: #30abd5;
            transition: .5s;
        }

        .btn-slide2 span.title2,
        .btn-slide2 span.title-hover2 {
            color: #efa666;
            right: 80px;
        }

        .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
            right: 80px;
            opacity: 0;
        }

        .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
            color: #fff;
        }
    </style>
</head>
<body>
<div id="wrap">
    <a href="#" class="btn-slide">
        <span class="circle"><i class="fa fa-rocket"></i></span>
        <span class="title">火箭</span>
        <span class="title-hover">带你飞</span>
    </a>
    <a href="#" class="btn-slide2">
        <span class="circle2"><i class="fa fa-download"></i></span>
        <span class="title2">下载</span>
        <span class="title-hover2">点击下载</span>
    </a>
</div>
</body>
</html>